<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{baseui/head :: head}">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content="动检通智慧云平台"/>
    <meta name="author" content="牧中(上海)物联网科技有限公司"/>
    <link rel="shortcut icon" href="/webjars/images/favicon.png"/>

    <title>牧中畜牧业大数据智慧云平台V1.0</title>


</head>
<body>
<!--顶部一级导航-->
<th:block th:replace="baseui/topheader :: topheader(1)"/>

<!--动检通菜单-->
<div id="topnav" th:replace="djt/partial/topnav :: topnav(2)"></div>


<div id="cl-wrapper">
    <!--左边导航-->
    <th:block th:replace="djt/partial/prod_left :: nav(13)"/>

    <div class="container-fluid" id="pcont">

        <div class="cl-mcont">


            <!--无害化分析-->
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">
                            <div class="pull-right" style="width:85%">

                                <div class="row show-grid">
                                    <div class="col-md-2">
                                        <div class="btn-group">
                                            <button type="button" id="tuweek" class="btn btn-default">本周</button>
                                            <button type="button" id="tumonth" class="btn btn-default">本月</button>
                                        </div>

                                    </div>
                                    <div class="col-md-3">
                                        <div id="starttu" class="input-daterange input-group">
                                            <input type="text" id="tustart" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="start" value="2017-07-11"
                                                   data-date-format="yyyy-mm-dd" >

                                            <span class="input-group-addon">到</span>

                                            <input type="text" id="tuend" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="end" value="2017-11-17"
                                                   data-date-format="yyyy-mm-dd" >
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <select id="tuarea" class="select2">
                                            <option value="">所有区域</option>
                                            <optgroup th:each="cityarea:${areaList}"
                                                      th:label="${cityarea.city}">
                                                <option th:each="regions:${cityarea.regions}"
                                                        th:text="${regions}" th:value="${regions}"></option>
                                            </optgroup>

                                        </select>

                                    </div>
                                    <div class="col-md-2">
                                        <select id="tutype" class="form-control">
                                            <option value="0">所有畜种</option>

                                            <option value="1">猪</option>
                                            <option value="2">羊</option>
                                            <option value="3">牛</option>
                                            <option value="4">家禽</option>
                                        </select>
                                    </div>

                                    <div class="col-md-1">
                                        <button type="button" id="tusearch" class="btn btn-primary">搜索</button>
                                    </div>

                                </div>


                            </div>
                            <br />
                            <h4>无害化趋势图</h4>

                        </div>
                        <div class="content">
                            <div id="harmlessChart" style="width: 1000px;height:300px;"></div>

                        </div>

                    </div>


                </div>
            </div>

            <!--无害化分析end-->

            <!--排行榜-->
            <div class="row">
                <div class="col-md-12">
                    <div class="block-flat">
                        <div class="header">
                            <div class="pull-right" style="width:85%">

                                <div class="row show-grid">
                                    <div class="col-md-2">
                                        <div class="btn-group">
                                            <button id="phbweek" type="button" class="btn btn-default">本周</button>
                                            <button id="phbmonth" type="button" class="btn btn-default">本月</button>
                                        </div>

                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-daterange input-group">
                                            <input type="text" id="phbstart" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="start" value="2017-07-20"
                                                   data-date-format="yyyy-mm-dd">
                                            <span class="input-group-addon">到</span>
                                            <input type="text" id="phbend" class="input-sm form-control date datetime"
                                                   data-min-view="2" name="end" value="2017-07-26"
                                                   data-date-format="yyyy-mm-dd">
                                        </div>
                                    </div>
                                    <div class="col-sm-2">
                                        <select id="phbarea" class="select2">
                                            <option value="">所有区域</option>
                                            <optgroup th:each="cityarea:${areaList}"
                                                      th:label="${cityarea.city}">
                                                <option th:each="regions:${cityarea.regions}"
                                                        th:text="${regions}" th:value="${regions}"></option>
                                            </optgroup>

                                        </select>

                                    </div>
                                    <div class="col-md-2">
                                        <select id="phbtype" class="form-control">
                                            <option value="0">所有畜种</option>

                                            <option value="1">猪</option>
                                            <option value="2">羊</option>
                                            <option value="3">牛</option>
                                            <option value="4">家禽</option>
                                        </select>
                                    </div>

                                    <div class="col-md-1">
                                        <button id="phbsearch" type="button" class="btn btn-primary">搜索</button>
                                    </div>

                                </div>


                            </div>
                            <br />
                            <h4>无害化趋势分析表</h4>

                        </div>
                        <div class="content">

                            <div class="row">

                                <table class="no-border blue">
                                    <thead class="no-border">
                                    <tr>
                                        <th>排行</th>
                                        <th>地区</th>
                                        <th>畜种</th>
                                        <th>数量</th>
                                        <th>占比</th>
                                        <th>同比</th>
                                        <th class="text-right">环比</th>
                                    </tr>
                                    </thead>
                                    <tbody id="whhtable" class="no-border-x">
                                    <tr>
                                        <td>1</td>
                                        <td>金山</td>
                                        <td>猪</td>
                                        <td>2000</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>金山</td>
                                        <td>猪</td>
                                        <td>2000</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>金山</td>
                                        <td>猪</td>
                                        <td>2000</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>金山</td>
                                        <td>猪</td>
                                        <td>2000</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>金山</td>
                                        <td>猪</td>
                                        <td>2000</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                    </tr>
                                    <tr>
                                        <td>6</td>
                                        <td>金山</td>
                                        <td>猪</td>
                                        <td>2000</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td><i class="fa fa-angle-up"></i>30%</td>
                                        <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                                    </tr>


                                    </tbody>
                                </table>

                            </div>

                        </div>

                    </div>


                </div>
            </div>


        </div>
    </div>
</div>

<script type="text/javascript" src="/webjars/js/jquery.js"></script>


<script type="text/javascript" src="/webjars/js/jquery.nanoscroller/jquery.nanoscroller.js"></script>
<script type="text/javascript" src="/webjars/js/behaviour/general.js"></script>
<script src="/webjars/js/jquery.ui/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript" src="/webjars/js/jquery.nestable/jquery.nestable.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.switch/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdn.bootcss.com/select2/3.4.5/select2.min.js" type="text/javascript"></script>

<script src="/webjars/js/bootstrap.slider/js/bootstrap-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="/webjars/js/jquery.niftymodals/js/jquery.modalEffects.js"></script>
<script type="text/javascript" src="/webjars/js/bootstrap.summernote/dist/summernote.min.js"></script>

<script type="text/javascript" src="/webjars/js/jquery.magnific-popup/dist/jquery.magnific-popup.min.js"></script>


<script src="/webjars/js/behaviour/voice-commands.js"></script>
<script src="/webjars/js/bootstrap/dist/js/bootstrap.min.js"></script>

<script src="//cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        App.init();
    });
</script>
<script type="text/javascript">
    function type(number) {
        /*
         1: '集中处理',
         2: '焚烧',
         3: '化制',
         4: '掩埋',
         5: '发酵',
         6: '其它',*/
        switch (number) {
            case 1:
                return "集中处理";
                break;
            case 2:
                return "焚烧";
                break;
            case 3:
                return "化制";
                break;
            case 4:
                return "掩埋";
                break;
            case 5:
                return "发酵";
                break;
            case 6:
                return "其它";
                break;
        }
    }
    function all(map){
        return Number(map[1])+Number(map[2])+Number(map[3])+Number(map[4])+Number(map[5])+Number(map[6]);
    }
    //--------------------无害化处理趋势图------------------------------
    whhtu = function (time1) {
        if (time1 == null || time1 == "") {
            if ($("#tustart").val() != null && $("#tustart").val() != "") {
                time1 = $("#tustart").val();
            } else {
                if (now.getMonth() > 10) {
                    time1 = formatDate(new Date(now.getFullYear() + 1, 0, now.getDate() - now.getDay()));
                } else {
                    time1 = formatDate(new Date(now.getFullYear(), now.getMonth() + 1, now.getDate() - now.getDay()));
                }
            }
        }

        var datas = {
            'start': new Date(time1),
            'end': $("#tuend").val() == "" ? new Date() : new Date($("#tuend").val()),
            'area': $("#tuarea").val(),
            'type': $("#tutype").val()
        }
        $.ajax({
            type: "GET",
            url: "/djt/harmless/whhtu",
            data: datas,
            dataType: "json",
            success: function (data) {
                var unit = "";
                var d = new Date(time1);
                var d2 = $("#tuend").val() == "" ? new Date() : new Date($("#tuend").val());
                var d3 = d2.getTime() - d.getTime();
                if (d3 < (8 * 24 * 3600 * 1000)) {
                    unit = "日";
                } else if (d3 < (60 * 24 * 3600 * 1000)) {
                    unit = "周";
                } else {
                    unit = "月";
                }
                var date = "[";
                var other = "[";
                var fajiao = "[";
                var yanmai = "[";
                var huazhi = "[";
                var fenshao = "[";
                var jizhong = "[";
                var heji = "[";
                /*
                 1: '集中处理',
                 2: '焚烧',
                 3: '化制',
                 4: '掩埋',
                 5: '发酵',
                 6: '其它',*/
                $.each(data, function (index, item) {
                    for (var key in item) {
                        for(var prop in item[key]) {
                            date += "\"第" + ++index + unit + "\",";
                            other += item[key][prop] + ",";
                            fajiao += item[key][prop] + ",";
                            yanmai += item[key][prop] + ",";
                            huazhi += item[key][prop] + ",";
                            fenshao += item[key][prop] + ",";
                            jizhong += item[key][prop] + ",";

                        }
                    }
                })
                date=(date.substring(date.length-1)==',')?date.substring(0,date.length-1):date;
                other=(other.substring(other.length-1)==',')?other.substring(0,other.length-1):other;
                fajiao=(fajiao.substring(fajiao.length-1)==',')?fajiao.substring(0,fajiao.length-1):fajiao;
                yanmai=(yanmai.substring(yanmai.length-1)==',')?yanmai.substring(0,yanmai.length-1):yanmai;
                huazhi=(huazhi.substring(huazhi.length-1)==',')?huazhi.substring(0,huazhi.length-1):huazhi;
                fenshao=(fenshao.substring(fenshao.length-1)==',')?fenshao.substring(0,fenshao.length-1):fenshao;
                jizhong=(jizhong.substring(jizhong.length-1)==',')?jizhong.substring(0,jizhong.length-1):jizhong;
                heji=(date.substring(heji.length-1)==',')?heji.substring(0,heji.length-1):heji;
                date+="]";
                other += "]";
                fajiao += "]";
                yanmai += "]";
                huazhi += "]";
                fenshao += "]";
                jizhong += "]";
                heji += "]";
                date = JSON.parse(date);
                other = JSON.parse(other);
                fajiao = JSON.parse(fajiao);
                yanmai = JSON.parse(yanmai);
                huazhi = JSON.parse(huazhi);
                fenshao = JSON.parse(fenshao);
                jizhong = JSON.parse(jizhong);
                heji = JSON.parse(heji);


                var harmlessChart = echarts.init(document.getElementById('harmlessChart'));
                option = {

                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['合计总数', '集中处理', '焚烧', '化制', '掩埋', '发酵', '其它'],
                        selected: {
                            '集中处理': false, '焚烧': false, '化制': false, '掩埋': false, '发酵': false, '其它': false
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '合计总数',
                            type: 'line',

                            data: heji

                        },
                        {
                            name: '集中处理',
                            type: 'line',

                            data: jizhong

                        },
                        {
                            name: '焚烧',
                            type: 'line',

                            data: fenshao
                        },
                        {
                            name: '化制',
                            type: 'line',

                            data: huazhi
                        },
                        {
                            name: '掩埋',
                            type: 'line',

                            data: yanmai
                        },
                        {
                            name: '发酵',
                            type: 'line',

                            data: fajiao
                        }
                        ,
                        {
                            name: '其它',
                            type: 'line',

                            data: other

                        }
                    ]
                };
                harmlessChart.setOption(option);

            }

        })
    }



</script>
<script type="text/javascript">
    function color(num) {
        if (num > 0) {
            return "text-right color-success"
        }
        if (num == 0) {
            return "text-right color-primary"
        }
        if (num < 0) {
            return "text-right color-danger"
        }
    }

    function jt(num) {
        if (num > 0) {
            return "fa fa-angle-up"
        }
        if (num == 0) {
            return "fa fa-angle-right"
        }
        if (num < 0) {
            return "fa fa-angle-down"
        }
    }

    whhph = function (time1) {
        if (time1 == null || time1 == "") {
            if ($("#phbstart").val() != null && $("#phbstart").val() != "") {
                time1 = $("#phbstart").val();
            } else {
                if (now.getMonth() > 10) {
                    time1 = formatDate(new Date(now.getFullYear() + 1, 0, now.getDate() - now.getDay()));
                } else {
                    time1 = formatDate(new Date(now.getFullYear(), now.getMonth() + 1, now.getDate() - now.getDay()));
                }
            }
        }

        var datas = {
            'start': new Date(time1),
            'end': $("#phbend").val() == "" ? new Date() : new Date($("#phbend").val()),
            'area': $("#phbarea").val(),
            'type': $("#phbtype").val()
        }
        $.ajax({
            type: "GET",
            url: "/djt/harmless/whhph",
            data: datas,
            dataType: "json",
            success: function (data) {
                /*<tr>
                 <td>1</td>
                 <td>金山</td>
                 <td>猪</td>
                 <td>2000</td>
                 <td><i class="fa fa-angle-up"></i>30%</td>
                 <td><i class="fa fa-angle-up"></i>30%</td>
                 <td class="text-right color-danger"><i class="fa fa-angle-up"></i>28%</td>
                 </tr>*/
                var whhtable = "";
                $.each(data, function (index, item) {

                    var num = index + 1;
                    whhtable += "<tr>" +
                        "<td>" + num + "</td>" +
                        "<td>" + item.area + "</td>" +
                        "<td>" + item.type + "</td>" +
                        "<td>" + item.areanum + "</td>" +
                        "<td><i class='" + jt(item.zb) + "'></i>" + item.zb + "%" + "</td>" +
                        "<td><i class='" + jt(item.tb) + "'></i>" + item.tb + "%" + "</td>" +
                        "<td class='" + color(item.hb) + "'><i class='" + jt(item.hb) + "'></i>" + item.hb + "%" + "</td>" +
                        "</tr>";
                })
                /* bdname += "]";*/
                $("#whhtable").html("");
                $("#whhtable").append(whhtable);


            }

        })
    }


    /* function datechange(str) {
     if (str == "start") {
     var date = new Date($("#tustart").val());
     var year = date.getFullYear();
     var month = date.getMonth();
     var day = date.getDate();
     date.setMonth(month + 1);
     date.setDate(0);
     var lastday = date.getDate();
     if (day + 1 > lastday) {
     if (month + 1 > 11) {
     year += 1;
     month = 0;
     day = 1;
     } else {
     month += 1;
     day = 1;
     }
     } else {
     day += 1;
     }


     if ((month + 6) > 11) {
     year += 1;
     month = month - 5;
     } else {
     month = month + 6 + 1;
     }
     $("#endtu").datetimepicker({
     format: 'yyyy-mm-dd',
     minView: 2,
     startDate: new Date(year, month + 1, day),
     endDate: new Date(year, month, 1)

     })
     }
     if (str == "end") {
     var date = new Date($("#tuend").val());
     var year = date.getFullYear();
     var month = date.getMonth();
     var day = date.getDate();
     date.setMonth(month + 1);
     date.setDate(0);
     var lastday = date.getDate();
     if (day > 1) {
     day -= 1;
     } else {
     if (month > 0) {
     month -= 1;
     day = lastday;
     } else {
     year -= 1;
     month = 11;
     day = lastday;
     }
     }

     if (month > 5) {
     month -= 6;
     } else {
     year -= 1;
     month = 11;
     }
     $("#starttu").datetimepicker({
     format: 'yyyy-mm-dd',
     minView: 2,
     startDate: new Date(year, month + 1, day),
     endDate: new Date(year, month, 1)

     })

     }
     }*/

</script>
<script type="text/javascript">
    $(function () {

        //格式化日期：yyyy-MM-dd
        function formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return (myyear + "-" + mymonth + "-" + myweekday);
        }

        (function () {
            whhph(null);
            whhtu(null);
            $("#phbsearch").click(function () {
                whhph(null);
            });
            $("#tusearch").click(function () {
                whhtu(null);
            });

            $("#phbweek").click(function () {
                var now = new Date()
                var time1 = formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay()));
                whhph(new Date(time1));
            })
            $("#tuweek").click(function () {
                var now = new Date()
                var time1 = formatDate(new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay()));
                whhph(new Date(time1));
            })
            $("#phbmonth").click(function () {
                var now = new Date()
                var time1 = formatDate(new Date(now.getFullYear(), now.getMonth(), 1));
                whhph(new Date(time1));
            })
            $("#tumonth").click(function () {
                var now = new Date()
                var time1 = formatDate(new Date(now.getFullYear(), now.getMonth(), 1));
                whhph(new Date(time1));
            })


        })()


    })

</script>
</body>
</html>
